<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>枫叶Music云系统</title>
		<meta name="keywords" content="枫叶,音乐,云系统">
		<meta name="description" content="枫叶Music云系统">
		<style>
			* {margin:0;padding:0;}
			body {background:url("img/bg.jpg") no-repeat;background-size:cover;font:14px/1.5 "微软雅黑";color:#666;}
			/*music start*/
			.music{width:610px;height:470px;margin:10% auto;}
			/*m_lrc start*/
			.music .m_lrc{width:300px;height:500px;float:left;}
			.music .m_lrc .m_title {width:100%;height:65px;background-image:linear-gradient(#def,#abc);border-bottom:1px solid #ced1d3;border-radius:5px 5px 0 0;}
			.music .m_lrc .m_title h2{font-size:18px;font-weight:500;text-align:center;line-height:65px;}
			.music .m_lrc .m_con{width:100%;height:434px;background:url("img/lrc_bg.jpg");background-size:cover;}
			.music .m_lrc .m_con .m_img img{margin:100px 50px;border-radius:100px;opacity:.3;position:absolute;z-index:1;}
			.music .m_lrc .m_con .m_txt{height:420px;padding:5px;font-size:16px;color:#fff;text-align:center;overflow-y:auto;z-index:2;}
			.lrcline{font-size:14px;color:#fff;line-height:30px;padding-left:20px;}
			/*m_lrc end*/
			/*m_list start*/
			.music .m_list{width:300px;height:500px;float:right;}
			.music .m_list .m_name{width:100%;height:48px;background-image:linear-gradient(#456,#123);border-radius:5px 5px 0 0;text-align:center;line-height:48px;font-size:16px;color:#eee;}
			.music .m_list .m_list_con{height:452px;overflow-y:scroll;}
			.music .m_list .m_list_con ul li{height:40px;line-height:40px;list-style:none;padding-left:30px;background-image:linear-gradient(#def,#abc);border-bottom:1px solid #888;}
			.music .m_list .m_list_con ul li a{font-size:14px;color:#666;text-decoration:none;}
			.music .m_list .m_list_con ul li span{float:right;}
			.music .m_list .m_list_con ul li.b_sel{background-image:linear-gradient(#789,#456);color:#eee;}
			.music .m_list .m_list_con ul li.b_sel a{color:#eee;}
			/*m_list end*/
			/*music end*/
			@keyframes rotate{
				0%{transform:rotate(0deg);
					-webkit-transform:rotate(0deg);
					-ms-transform:rotate(0deg);
					-moz-transform:rotate(0deg);
					-o-transform:rotate(0deg);
				}
				100%{transform:rotate(360deg);
					-webkit-transform:rotate(360deg);
					-ms-transform:rotate(360deg);
					-moz-transform:rotate(360deg);
					-o-transform:rotate(360deg);
				}
			}
			.rotate{
				animation:rotate 10s linear infinite;
				-webkit-animation:rotate 10s linear infinite;
				-ms-animation:rotate 10s linear infinite;
				-moz-animation:rotate 10s linear infinite;
				-o-animation:rotate 10s linear infinite;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	</head>
	<body>
		<!--music start-->
		<div class="music">
			<!--m_lrc start-->
			<div class="m_lrc">
				<div class="m_title">
					<h2>枫叶云音乐</h2>
				</div>
				<div class="m_con">
					<div class="m_img">
						<img src="img/zjl_bg.jpg" alt="周杰伦" width="200" height="200" class="rotate">
					</div>
					<div class="m_txt">
					</div>
				</div>
			</div>
			<!--m_lrc end-->
			<!--m_list start-->
			<div class="m_list">
				<div class="m_name">FengYe Music</div>
				<div class="m_list_con">
					<ul id="m_box">
						<li data-src="music1/1.mp3" class="m_items b_sel">
							<i></i>
							<a href="#">周杰伦-安静</a>
							<span>分享</span>
						</li>
						<li data-src="music1/2.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-白色风车</a>
							<span>分享</span>
						</li>
						<li data-src="music1/3.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-不能说的秘密</a>
							<span>分享</span>
						</li>
						<li data-src="music1/4.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-彩虹</a>
							<span>分享</span>
						</li>
						<li data-src="music1/5.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-断了的弦</a>
							<span>分享</span>
						</li>
						<li data-src="music1/6.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-枫</a>
							<span>分享</span>
						</li>
						<li data-src="music1/7.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-搁浅</a>
							<span>分享</span>
						</li>
						<li data-src="music1/8.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-轨迹</a>
							<span>分享</span>
						</li>
						<li data-src="music1/9.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-回到过去</a>
							<span>分享</span>
						</li>
						<li data-src="music1/10.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-借口</a>
							<span>分享</span>
						</li>
						<li data-src="music1/11.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-七里香</a>
							<span>分享</span>
						</li>
						<li data-src="music1/12.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-晴天</a>
							<span>分享</span>
						</li>
						<li data-src="music1/13.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-退后</a>
							<span>分享</span>
						</li>
						<li data-src="music1/14.mp3" class="m_items">
							<i></i>
							<a href="#">周杰伦-我不配</a>
							<span>分享</span>
						</li>
					</ul>
				</div>
			</div>
			<!--m_list end-->
		</div>
		<!--music end-->
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script>
			// 创建一个mp3播放器
			var audioDom = document.createElement("audio");
			audioDom.autoplay = "autoplay";
			playMusic("music1/1.mp3");
			// 播放索引记录
			var playIndex = 0;
			// 音乐列表的总长度
			var len = $("#m_box").children().length;
			// 监听时间
			function timeEvent(){
				// 音频加载完毕监听
				audioDom.oncanplaythrough = function(){
					// 获取总时长
					var time = this.duration;
					// 格式化时间
					var ftime = formatTime(time);
					$(".t_start").text(ftime);
				}
				// 播放事件监听
				audioDom.ontimeupdate = function(){
					// 获取总时长
					var time = this.duration;
					// 获取播放时长
					var stime = this.currentTime;
					// 格式化时间
					var ftime = formatTime(stime);
					$(".t_end").text(ftime);
					// 获取播放进度
					var pbit = stime / time;
					// 计算百分比
					var percent = pbit *100;
					$(".b_scoll").width(percent + "%");
					$(".b_flag").css("left", (percent - 2) + "%");
				}
				// 音乐播放结束
				audioDom.onended = function(){
					if(mark == 2){
						nextMusic();
					}else{
						randomMusic();
					}
				}
			}
			// 格式化日期
			function formatTime(time){
				var m = Math.floor(time / 60);
				var s = Math.floor(time % 60);
				return (m<10 ? "0" + m:m) + ":" + (s<10 ? "0" + s:s);
			}
			// 添加音乐
			function addMusic(src) {
				audioDom.src = src;
			}
			// 播放音乐
			function playMusic(src) {
				addMusic(src);
				audioDom.play();
				loadLrc(src);
			}
			// 暂停音乐
			function pauseMusic() {
				audioDom.pause();
			}
			// 下一首
			function nextMusic() {
				playIndex = (playIndex == (len - 1) ? 0 : ++playIndex);
				// 选中音乐文件
				var sel = $("#m_box").find(".m_items").eq(playIndex);
				var src = sel.data("src");
				// 播放选中音乐
				playMusic(src);
				sel.addClass("b_sel").siblings().removeClass("b_sel");
			}
			// 上一首
			function prevMusic() {
				playIndex = (playIndex == (len - 1) ? 0 : --playIndex);
				// 选中音乐文件
				var sel = $("#m_box").find(".m_items").eq(playIndex);
				var src = sel.data("src");
				// 播放选中音乐
				playMusic(src);
				sel.addClass("b_sel").siblings().removeClass("b_sel");
			}
			// 随机播放
			function randomMusic() {
				var random = Math.floor(Math.random() * len);
				playIndex = random;
				// 添加选中音乐
				var sel = $("#m_box").find(".m_items").eq(playIndex);
				var src = sel.data("src");
				// 播放选中音乐
				playMusic(src);
				sel.addClass("b_sel").siblings().removeClass("b_sel");
			}
			// 顺序播放2，随机播放1
			var mark = 2;
			$(function(){
				// 初始化监听事件
				timeEvent();
				// 点击播放按钮
				$("#play").click(function(){
					// 如果已经有选中播放文件就直接播放
					var sel = $("#m_box").find(".m_items").eq(playIndex);
					var src = sel.data("src");
					if(!src){
						// 如果没有就把第一个当作播放元素
						var sel = $("#m_box").find("li").eq(0);
						var src = sel.data("src");
						playMusic(src);
						sel.addClass("b_sel");
					}
					playMusic(src);
					// 切换成暂停按钮
					$("#play").hide().next().show();
					// 讲索引记录下来
					playIndex = sel.index();
				});
				// 点击暂停按钮
				$("#stop").click(function(){
					// 调用暂停方法
					pauseMusic();
					// 切换成播放按钮
					$("stop").hide().prev().show();
				});
				// 点击音乐列表播放
				$("#m_box").find(".m_items").click(function(){
					var sel = $(this);
					// 获取要播放的音乐文件地址
					var src = sel.data("src");
					// 播放选中音乐
					playMusic(src);
					loadLrc(src);
					sel.addClass("b_sel").siblings().removeClass("b_sel");
					// 记录该音乐的索引
					playIndex = $(this).index();
					// 自动触发发放按钮
					$("#play").trigger("click");
				});
				// 拖动播放
				$(".b_2").mousedown(function(e) {
					// 获取拖动对象
					var $this = $(this);
					// 获取鼠标位置
					var x = e.clientX || e.pageX;
					// 获取拖动元素的起点位置
					var left = $this.position().left;
					// 获取拖动元素的终点位置
					var maxleft = $this.parent().width() - 10;
					// 先暂停音乐
					pauseMusic();
					// 拖动元素开始
					$(document).mousemove(function(e) {
						// 获取一定的鼠标位置
						var nl = (e.clientX || e.pageX) - x + left;
						// 边界判断
						if (nl <= 0)
							nl = 0;
						if (nl >= maxleft)
							nl = maxleft;
						// 拖动最终的位置
						$this.css("left",nl);
						// 根据拖动的位置除以最大位置得到百分比
						var percent = (nl / maxleft) * 100;
						// 给进度条和拖动元素赋值
						$(".b_scoll").width(percent + "%");
						$(".b_flag").css("left", (percent - 2) + "%");
						// 音乐文件的时间加载
						audioDom.currentTime = audioDom.duration * (nl / maxleft);
					}).mouseup(function(){
						// 松开鼠标播放音乐
						playMusic(src);
						// 解除拖动事件
						$(document).unbind("mousemove");
						$(document).unbind("mouseup");
					});
				});
				$(".b_3").mousedown(function(e) {
					// 获取点击位置
					var $this = $(this);
					// 获取鼠标位置
					var x = e.clientX || e.pageX;
					// 获取起点位置
					var left = $this.parent().offset().left;
					// 获取终点位置
					var maxwidth = $this.parent().width() - 10;
					// 最大位置
					var w = x - left;
					// 根据点击的位置除以最大位置得到百分比
					var percent = (w / maxwidth) * 100;
					// 给进度条和拖动元素赋值
					$(".b_scoll").width(percent + "%");
					$(".b_flag").css("left", (percent - 2) + "%");
					// 音乐文件的时间加载
					audioDom.currentTime = audioDom.duration * (w / maxwidth);
				});
				// 收起列表
				$(".expand").click(function(){
					$(".m_list").animate({left:-310},function(){
						$("#music").animate({width:300});
					});
				});
				// 展开列表
				$(".expandon").click(function(){
					$("#music").width(610);
					$(".m_list").animate({left:0});
				});
			});
			// 从服务器动态加载歌词
			function loadLrc(name){
				name = name.replace(/.mp3/, "");
				$.ajax({
					type:"post",
					url:"data.jsp",
					data:{name:name},
					success:function(data){
						var lrc = data;
						// 把时间和歌词分开
						var lrcArr = lrc.split("[");
						var lrcHTML= "";
						for(var i = 0; i < lrcArr.length; i++){
							// 第二次分割
							var arr = lrcArr[i].split("]");
							// 取到时间
							var timer = arr[0].split(".");
							// 取到歌词
							var message = arr[1];
							// 取到分钟和秒
							var stime = timer[0].split(":");
							var ms = stime[0] * 60 + stime[1] * 1;
							if(message){
								lrcHTML += "<p>" + message + "</p>"
							}
						}
						$(".m_txt").html(lrcHTML);
					}
				});
			}
		</script>
	</body>
</html>